import React, { useState } from 'react';
import { Form, Select, Table, Button, Typography, Divider, Input, message } from 'antd';
import APPLY_STATUS from '~/js/common/const/applyStatus';
import { useApplyProjectList, applyProjectItem } from '../../hook/projectList';
import { useProjectMembers } from '~/js/hook/projectMember';
import { NORMAL_USER, ADMIN } from '~/js/common/const/role';
import { useInput } from '~/js/hook';

import './index.less';

const { Title } = Typography;
const { Column } = Table;
const Option = Select.Option;

const userType = [
    {
        name: '全部',
        value: -1
    },
    {
        name: '管理员',
        value: ADMIN
    },
    {
        name: '普通用户',
        value: NORMAL_USER
    }
];

const roleType = [
    {
        name: '管理员',
        value: ADMIN
    },
    {
        name: '普通用户',
        value: NORMAL_USER
    }
];

export default function ProjectMembers(props) {
    const { list } = useApplyProjectList(APPLY_STATUS.STATUS_PASS);
    const { value: inputUser, bind, reset: resetInputUser } = useInput();
    const [role, setRole] = useState(-1);
    const [projectId, setProjectId] = useState(-1);
    const [project, setProject] = useState(null);
    const { data, deleteMember, setUserRoleChange, addUser } = useProjectMembers(role, projectId);

    function handelProjectChange(id) {
        const project = list.find(t => t.id === id);
        setProjectId(project.id);
        setProject(project);
    }

    function handleRoleChange(value) {
        setRole(value);
    }

    function handlerAddUser() {
        if (data.find(member => member.loginName === inputUser)) {
            message.error(`已经存在 ${inputUser} 用户！`);
        } else {
            addUser(inputUser);
            resetInputUser();
        }
    }

    return (
        <div>
            <Form layout="inline">
                <Form.Item label="当前项目">
                    <Select
                        showSearch
                        defaultValue={'全部'}
                        style={{ width: 180 }}
                        onChange={handelProjectChange}
                        onSelect={handelProjectChange}
                        filterOption={(input, option: any) =>
                            option.props.value
                                .toString()
                                .toLowerCase()
                                .indexOf(input.toLowerCase()) >= 0 ||
                            option.props.title.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                    >
                        {list.map((item, index) => {
                            return (
                                <Option title={item.name} key={item.id} value={item.id}>
                                    {item.id}.{item.name}
                                </Option>
                            );
                        })}
                    </Select>
                </Form.Item>
                <Form.Item label="用户类型">
                    <Select
                        defaultValue={'全部'}
                        style={{ width: 180 }}
                        onChange={handleRoleChange}
                    >
                        {userType.map((item, index) => {
                            return (
                                <Option key={item.value} value={item.value}>
                                    {item.name}
                                </Option>
                            );
                        })}
                    </Select>
                </Form.Item>
            </Form>
            <Divider />
            {project ? (
                <div>
                    <Typography>
                        <Title>{project.name}</Title>
                    </Typography>
                    <Form layout="inline">
                        <Form.Item>
                            <Input {...bind} />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" onClick={handlerAddUser} disabled={!inputUser}>
                                添加用户
                            </Button>
                        </Form.Item>
                    </Form>
                    <Divider />
                </div>
            ) : null}
            <Table pagination={false} dataSource={data} key={projectId}>
                <Column title="成员" key="chineseName" dataIndex="chineseName" />
                <Column
                    title="角色"
                    key="role"
                    dataIndex="role"
                    render={(role, record: applyProjectItem) => {
                        return (
                            <Select
                                defaultValue={role}
                                style={{ width: 120 }}
                                onChange={value => {
                                    setUserRoleChange(record.id, value);
                                }}
                            >
                                {roleType.map((item, index) => {
                                    return (
                                        <Option key={item.value} value={item.value}>
                                            {item.name}
                                        </Option>
                                    );
                                })}
                            </Select>
                        );
                    }}
                />
                <Column
                    title="操作"
                    key="id"
                    dataIndex="id"
                    render={(id, record: applyProjectItem) => {
                        return (
                            <Button
                                type="danger"
                                onClick={() => {
                                    deleteMember(id);
                                }}
                            >
                                删除
                            </Button>
                        );
                    }}
                />
            </Table>
        </div>
    );
}
